<template>
    <div>
        <input type="text" class='form-control' v-model='txt'>
        <ul>
            <li v-for='item in datas | filterBy txt' v-text='item.txt' @click='click(item)' :class='{"active":this.id==item.id}'></li>
        </ul>
    </div>
</template>
<script>
    export default {
        //父组件传递过来的参数
        props: {
            datas: {
              type: null,
              twoWay: true
            },
            id:{
              type:null,
              twoWay:true
            },
            callback:{
                type:Function,
            }
        },
        data(){
            return{
                txt:'',
            }
        },
        ready(){
        },
        methods: {
            click(item,index){
                this.id=item.id;
                this.txt=item.txt;
                this.callback&&this.callback();
            }
        },
    }
</script>
<style lang="sass" scoped>
    div{
        width: 400px;
        ipnut{
            width: 100%;
        }
        ul{
            background: #fff;
            height: 120px;
            overflow-y: scroll;
            li{
                list-style: none;
                height: 30px;
                line-height: 30px;
                text-indent: 5px;
                cursor:pointer;
            }
            li.active{
                background:#ccc;
            }
        }
    }
</style>

